<template>
  <div class="issue">
    <div class="top">
      <div @click="shoot">
        <img :src="issueCover">
        <span @click="back()">
          <yd-icon name="pushBack" slot="icon" custom></yd-icon>
        </span>
      </div>
      <div>
        <textarea v-model="title" placeholder="请输入商品或服务标题"></textarea>
      </div>
    </div>
    <div>
      <!--<div>-->
      <!--<div>-->
      <!--<img :src="datas.userPic">-->
      <!--</div>-->
      <!--<div>-->
      <!--<yd-icon name="fivePonintedStar" slot="icon" custom size="0.24rem" v-for="(i,index) in datas.num" :key="index"></yd-icon>-->
      <!--</div>-->
      <!--</div>-->
      <!--<div>-->
      <span @click="content()">点击编辑商品详情</span>
      <!--<span>步行:{{Math.ceil(duration/60)}}分钟</span>-->
      <!--</div>-->
      <div :style="{minHeight:contentHeight}">
        <span @click="height()">
          <yd-icon name="packUp" slot="icon" custom size="0.3rem"></yd-icon>
        </span>
        <div>
          <textarea placeholder="请输入商品或服务详情" v-model="text"></textarea>
        </div>
        <div style="line-height: 0.6rem;display: none" @click="add()">
          <yd-icon name="readAddTo" slot="icon" custom color="red"></yd-icon>
          <span>添加一条信息</span>
        </div>
      </div>
    </div>
    <div id="allMap"></div>
    <div class="audio" style="display: none">
      <div>
        <yd-icon name="refresh" slot="icon" custom size="0.4rem"></yd-icon>
      </div>
      <div :style="{background:color.bg,borderColor:color.border}" @touchstart="start()" @touchend="ends()">
        <yd-icon name="speak" slot="icon" custom :color="color.color"></yd-icon>
      </div>
      <div @touchend="msgList()">
        <yd-icon name="write" slot="icon" custom size="0.4rem"></yd-icon>
      </div>
    </div>
    <div id="add">
      <yd-icon name="cross" custom slot="icon" color="#FFB36E" size="0.5rem"></yd-icon>
    </div>
    <canvas id="canvas"></canvas>
  </div>
</template>
<script>
  import {Icons} from 'vue-ydui/dist/lib.rem/icons'
  import {BmlLushu} from 'vue-baidu-map'
  import {mapState} from 'vuex'
  import fun from '@/common/js/base/audio.js'
  import issueCover from '@/common/js/base/issueCover.js'
  import upload from '@/common/js/base/issueUpload.js'
  import AMap from 'AMap';
  import coordtransform from 'coordtransform'

  export default {
    components: {
      'yd-icon': Icons,
      BmlLushu
    },
    data() {
      return {
        color: {
          bg: '#ffffff',
          border: '#EF8356',
          color: '#ef8356'
        },
        center: {
          lng: 104.188148,
          lat: 30.568834
        },
        centers: [],
        end: {
          lng: 104.199539,
          lat: 30.569967
        },
        zoom: 15,
        play: true,
        path: [],
        title: null,//商品标题
        text: null,//商品详细介绍
        issueCover: require('./img/issueCover.jpg'),
        contentHeight: 0,//商品详情区域高度
        arr: null,//用于存放圆圈
        map: null,//存放地图map
        BMap: null,//存放地图BMap
      }
    },
    methods: {
      back() {
        this.$router.back(-1)
      },
      handler(center) {
        let th = this;
        var bd09togcj02 = coordtransform.bd09togcj02(center.lng, center.lat);
        const map = new AMap.Map('allMap', {
          zoom: 14,
          center: [bd09togcj02[0], bd09togcj02[1]]
        });
        let arr = new Array();
        new AMap.Marker({
          map: map,
          position: bd09togcj02,
          icon: new AMap.Icon({
            size: new AMap.Size(35, 34),  //图标大小
            image: "static/img/character.png",
            imageOffset: new AMap.Pixel(0, 0)
          })
        });


        var Circles = function (lng, lat) {   //绘制圆
          var circle = new AMap.Circle({
            center: new AMap.LngLat(lng, lat),// 圆心位置
            radius: 750, //半径
            strokeColor: "#FFB36E", //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 2, //线粗细度
            fillColor: "#fff", //填充颜色
            fillOpacity: 0.2//填充透明度
          });
          circle.setMap(map);
          return circle
        };
        arr.push(Circles(bd09togcj02[0], bd09togcj02[1]));
        th.centers.push({lng:center.lng,lat:center.lat});
        console.log(th.centers);

        let add = document.getElementById('add');//按键盒子


        let html = "<div style='width: 80%;height: 1rem;position: absolute;bottom: 0.5rem;left: 50%;transform: translateX(-50%);'>" +
          "<span id='cancel' style='display: inline-block;color:white;width: 1rem;height: 1rem;border-radius: 50%;background: #FFB36E;line-height: 1rem;text-align: center' >取消</span>" +
          "<span id='affirm' style='display: inline-block;color:white;width: 1rem;height: 1rem;border-radius: 50%;background: #FFB36E;float: right;line-height: 1rem;text-align: center' >确认</span>" +
          "</div>";
        let uploadHtml = "<div id='issueUpload' style='width: 30%;height: 1rem;position: absolute;bottom: 0.5rem;left: 50%;transform: translateX(-50%);border-radius: 1rem;text-align: center;line-height: 1rem;border: 1px solid #FFB36E;background: white;font-size: 16px;color: #ffb36e'>发送</div>";
        add.innerHTML = uploadHtml;

        var issueLoad = function () {  //发送投送卡
          let uploadhtml = document.getElementById("issueUpload");//发视按钮
          uploadhtml.addEventListener("click",()=>{
//            console.log(th.center);
//            console.log(th.centers)
            upload.upload(th.title, th.text, th.center, th.centers)
          });
        };
        issueLoad();


        var clickEventListener = map.on('click', function (e) {
          f(e.lnglat);
          var gcj02tobd09 = coordtransform.gcj02tobd09(e.lnglat.lng,e.lnglat.lat);
          th.centers.push({lng:gcj02tobd09[0],lat:gcj02tobd09[1]});  //坐标系转换
//          console.log(arr)
//          console.log(th.centers)
        });

        var f = function (point) {
          arr.push(Circles(point.lng, point.lat));
          add.innerHTML = html;
          var affirm = document.getElementById('affirm');//确认圆圈
          var cancel = document.getElementById('cancel');//取消圆圈
          affirm.addEventListener("click", () => {
            add.innerHTML = uploadHtml;
            issueLoad()
          });
          cancel.addEventListener("click", () => {
//            AMap.event.addDomListener(document.getElementById('clearMarker'), 'click', function() {
            arr[arr.length - 1].setMap(null);
//            }, false);
            arr.splice(arr.length - 1, 1);
            th.centers.splice(arr.length-1,1);
            add.innerHTML = uploadHtml;
            issueLoad()
          })
        }

      },
      handleSearchComplete(res) { //暂时用不着

      },
      upload() {  //圆圈
        upload.upload(this.title, this.text, this.center, this.centers)
      },
      aaaa() {
//        this.map.addEventListener('click',(e)=>{  //手动选择位置
//          console.log(e.point)
//        })
      },
      locations() {
        this.$GPS   //获取定位信息
        this.center.lng = this.$store.state.locations.lng;
        this.center.lat = this.$store.state.locations.lat;
      },
      start() {
        this.color.bg = '#ef8356'
        this.color.border = '#ffffff'
        this.color.color = '#ffffff'
        fun.startReady()
      },
      ends() {
        this.color.bg = '#ffffff'
        this.color.border = '#ef8356'
        this.color.color = '#ef8356'
        fun.stopReady()
      },
      msgList() {
        this.$router.push({name: 'msgList'})
      },
      shoot() {  // 拍摄封面图
        console.log(this.center)
        issueCover.showActionSheet()
        let th = this
        window.issueCover = setInterval(() => {
          if(th.$store.state.issueCover!==null){
            th.issueCover = th.$store.state.issueCover
          }

        }, 1000)
      },
      content() { //改变商品详情高度
        this.contentHeight = '4rem'
      },
      height() { //改变商品详情高度
        this.contentHeight = '0'
      },
      add() {
        this.html = this.html + this.htmls
      }
    },
//    computed:mapState(["locations"]),
    activated() {
      this.locations()
      window.time = setInterval(this.locations, 500);
      this.handler(this.center)
//      if(this.$store.state.locations!==null){
//        this.handler(this.$store.state.locations)
//      }
    },
    deactivated() {
      clearInterval(window.issueCover)
      this.contentHeight = '0'
      this.centers = []
//      clearInterval(window.time)
    },
  }
</script>
<style lang="less" scoped>
  @import "~less/base";

  .issue {
    position: absolute;
    z-index: 40;
    top: 0;
    height: 100%;
    width: 100%;
    background: @advertisionPush-bg;
    overflow: hidden;
    .top {
      height: 4.32rem;
      position: relative;
      > div:nth-child(1) {
        height: 100%;
        > img {
          width: 100%;
          height: 100%;
        }
        > span {
          position: absolute;
          top: 0.23rem;
          right: 0.21rem;
          > i {
            color: @advertisionPush-bg;
          }
        }

      }
      > div:nth-child(2) {
        position: absolute;
        bottom: 0;
        z-index: 32;
        height: 0.7rem;
        width: 100%;
        background: rgba(0, 0, 0, 0.4);
        color: @push-FontSize;
        border-top: 1px solid #c2c2c2;
        > textarea {
          overflow: hidden;
          border: none;
          width: 100%;
          height: 100%;
          line-height: 0.7rem;
          border-bottom: 1px solid #c2c2c2;
          padding-left: 0.2rem;
        }
      }
    }
    > div:nth-child(2):active {
      background: #c2c2c2;
    }
    > div:nth-child(2) {
      height: 0.62rem;
      position: relative;
      line-height: 0.62rem;
      font-size: 16px;
      background: @advertisionPush-bg;
      > span {
        padding-left: 0.2rem;
        width: 100%;
        display: inline-block;
      }
      > div {
        width: 100%;
        top: -0.08rem;
        /*min-height: 2rem;*/
        position: absolute;
        z-index: 10;
        background: white;
        transition: 0.5s;
        height: 0;
        overflow: hidden;
        > span {
          margin-right: 0.3rem;
          margin-top: 0.1rem;
          float: right;
        }
        > div {
          height: 3rem;
          border-bottom: 1px solid #c2c2c2;
          > textarea {
            padding-left: 0.3rem;
            width: 90%;
            border: none;
            height: 100%;
            line-height: 0.5rem;
          }
        }
        > div:nth-child(2) {
          margin-top: 0.6rem;
        }
      }
      /* >div:nth-child(1){
         position: absolute;
         z-index: 33;
         right: 0.08rem;
         bottom: 0;
         height: 1.54rem;
         width: 1.98rem;
         border: 0.02rem solid @advertisionPush-icon;
         background: white;
         >div:nth-child(1){
           width: 100%;
           height: 1.18rem;
           >img{
             width: 100%;
             height: 100%;
           }
         }
         >div:nth-child(2){
           >i{
             color: #faa71b;
             margin-left: 0.1rem;
           }
         }
       }
       >div:nth-child(2){
         >span{
           font-size: 14px;
           line-height: 0.6rem;
         }
         >span:nth-child(1){
           float: left;
           margin-left: 0.2rem;
         }
         >span:nth-child(2){
           float: right;
           margin-right: 2.15rem;
         }
       }*/
    }
    > div:nth-child(3) {
      height: 68%;
      /*.map{*/
      /*height: 68%;*/
      /*}*/
    }
    .audio {
      width: 80%;
      height: 1.74rem;
      margin-left: 50%;
      transform: translateX(-50%);
      position: fixed;
      bottom: 0.64rem;
      > div {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        float: left;
        width: 0.9rem;
        height: 0.9rem;
        background: #EF8356;
        border-radius: 50%;
        border: 1px solid #ffffff;
        color: #ffffff;
        line-height: 0.9rem;
        text-align: center;
      }
      > div:nth-child(1) {
        left: 15%;
      }
      > div:nth-child(3) {
        right: 15%;
      }
      > div:nth-child(2) {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 1.76rem;
        height: 1.66rem;
        /*border: 0.04rem solid #c;*/
        border-radius: 50%;
        text-align: center;
        background: @color-btnBack1;
        > i {
          line-height: 1.66rem;
          color: #ef8356;
        }
      }
    }
    > .add {
      position: absolute;
      background: white;
      bottom: 1rem;
      right: 0.5rem;
      width: 1rem;
      height: 1rem;
      border: 3px solid #FFB36E;
      border-radius: 50%;
      text-align: center;
      > i {

        line-height: 0.9rem;
      }
    }
  }
</style>
